<!--
 * @Author: your name
 * @Date: 2021-11-19 22:24:36
 * @LastEditTime: 2021-11-21 11:42:31
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\swyzt\swlinks\swxz\index.vue
-->
<template>
  <div class="wrap">
    <div class="swxz">
      <transition
        name="custom-classes-transition"
        enter-active-class="animated fadeIn"
        leave-active-class="animated fadeOut"
      >
        <Tree v-show="treeisshow" />
      </transition>
      <div @click="treeisshowChange" class="tool">
        <div class="icon">
          <img src="../../../../assets/images/init/图层.png" alt="" />
        </div>
        <div :style="{ color: treeisshow ? 'aqua' : '#fff' }" class="text">
          图层
        </div>
      </div>
      <div class="box">
        <div class="title">
          <p>总规划统计分析</p>
        </div>
        <div class="box_blocks">
          <div
            v-for="(item, index) in boxBlockData"
            :key="index"
            class="box_block"
            @click="box_blockClick(item)"
            :style="{
              background:
                boxBlockActive === item.name
                  ? 'linear-gradient(180deg, rgba(255, 255, 255, 5e-05) 0%, rgba(33, 136, 205, 0.5) 99.13%), linear-gradient(180deg, #1F3E72 0%, #112650 100%)'
                  : 'linear-gradient(180deg, #1f3e72 0%, #112650 100%)',
            }"
          >
            <div class="box_blockwrap">
              <div class="tit">
                <p
                  :style="{
                    color: boxBlockActive === item.name ? '#fff' : '#ffffff8f',
                  }"
                >
                  {{ item.name }}
                </p>
              </div>
              <div class="data">
                <p>
                  {{ item.data }}
                </p>
              </div>
            </div>
          </div>
        </div>

        
        <div class="datalist">
          <div class="dataheader">
            <div
              class="headerlist"
              v-for="(item, index) in datalist.headerData"
              :key="index"
            >
              <span>
                {{ item }}
              </span>
            </div>
          </div>
          <div class="databoxs">
            <div
              v-for="(item, index) in datalist.data"
              :key="index"
              class="databox"
            >
              <div class="name">
                <span>
                  {{ item.name }}
                </span>
              </div>
              <div class="zcxsw">
                <span>
                  {{ item.zcxsw }}
                </span>
              </div>
              <div class="zkr">
                <span>
                  {{ item.zkr }}
                </span>
              </div>
              <div class="zckr">
                <span>
                  {{ item.zckr }}
                </span>
              </div>
              <div class="xczrr">
                <span>
                  {{ item.xczrr }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Tree from "./infotree";
export default {
  data() {
    return {
      treeisshow: false,
      boxBlockActive: "正常蓄水位",
      boxBlockData: [
        {
          name: "正常蓄水位",
          data: "28m³",
        },
        {
          name: "总库容",
          data: "5467万m³",
        },
        {
          name: "正常库容",
          data: "563万m³",
        },
      ],
      datalist: {
        headerData: [
          "名称",
          "正常蓄水位(m³)",
          "总库容(万m³)",
          "正常库容(万m³)",
          "巡查责任人",
        ],
        data: [
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "南风坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
          {
            name: "长坑水库",
            zcxsw: 89,
            zkr: 5123,
            zckr: 2047,
            xczrr: "张武",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    box_blockClick(val) {
      this.boxBlockActive = val.name;
    },
    treeisshowChange() {
      this.treeisshow = !this.treeisshow;
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: { Tree },
};
</script>

<style lang="scss" scoped>
.swxz {
  width: 500px;
  height: calc(100% - 95px);
  position: absolute;
  right: 0;
  top: 95px;
  background: rgb(49, 180, 174);
  padding: 0 32px;
  background: linear-gradient(
    -90deg,
    rgba(37, 52, 80, 0.8) 0%,
    rgba(5, 49, 126, 0) 100%
  );
  .tool {
    width: 32px;
    height: 42px;

    position: absolute;
    left: -40px;
    top: 0;
    .icon {
      width: 32px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(27, 56, 95);
      border-radius: 50%;
    }
    .text {
      margin-top: 5px;
      font-size: 12px;
      text-align: center;
    }
    img {
      width: 70%;
    }
  }
  .box {
    height: 100%;
    .title {
      margin: 0 auto;
      width: 442px;
      height: 36px;
      background: url("../../../../assets/images/init/Group 700.png") no-repeat
        center/cover;
      background-size: 100%;
      margin: 10px 0;
      display: flex;
      align-items: center;
      > p {
        font-family: OPPOSans;
        font-style: normal;
        font-weight: normal;
        font-size: 18px;
        line-height: 24px;
        /* identical to box height */
        color: #ffffff;
        text-indent: 2em;
      }
    }
    .box_blocks {
      margin: 25px 0;
      width: 100%;
      height: 100px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .box_block {
        width: 134px;
        height: 114px;
        // background: ;
        mix-blend-mode: normal;
        // opacity: 0.6;
        border-radius: 4px;
        .box_blockwrap {
          cursor: pointer;
          background: url("../../../../assets/images/init/形状.png") no-repeat
            center/cover;
          width: 134px;
          height: 114px;
          overflow: hidden;
          .tit {
            font-family: OPPOSans;
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            line-height: 24px;
            margin: 20px;
          }
          .data {
            color: rgb(116, 243, 220);
            font-family: OPPOSans;
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            line-height: 24px;
            margin: 20px;
          }
        }
      }
    }
    .datalist {
      .dataheader {
        width: 100%;
        height: 40px;
        background: rgba(1, 211, 248, 0.19);
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.651);
        position: relative;
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 2px;
          bottom: -4px;
          background: rgba(1, 211, 248, 0.19);
        }
        .headerlist {
          width: 19.5%;
          text-align: center;
        }
      }
      .databoxs {
        // display: flex;
        overflow: auto;
        height: 580px;
        width: 100%;
        margin: 5px 0;
        > .databox:nth-of-type(odd) {
          > div {
            background: rgba(255, 255, 255, 0.05);
          }
        }
        .databox {
          width: 100%;
          text-align: center;
          display: flex;
          justify-content: space-around;
          align-items: center;

          > div {
            width: 19.5%;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(17, 38, 80, 0.3);
            margin: 5px 0px;
          }
        }
      }
    }
  }
}
</style>
